<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    {include file="../application/common/view/default/public/head.html"/}
    {load href="/ucenter/static/css/center.css" type="text/css" /}
    {load href="/js/jquery-2.0.3.min.js" /}

    {include file="../../../application/common/view/default/public/js"/}
</head>
<body>

<div class="banner">
    <!--<canvas id="canvas" width="1835" height="950"></canvas>-->

    <div class="logo-box">
        {php}$logo = get_cover(modC('LOGO',0,'Config'),'path');
            $logo = $logo?$logo:'/images/logo.png';
        {/php}
        <a class="navbar-brand logo" href="{:url('home/Index/index')}"><img src="{$logo}"/></a>
    </div>
</div>
    <div class="login-box">
        {if condition="$step eq 'start'"}
        <div class="col-xs-9 info-box">
            <form action="{:url('register')}" method="post">
                <ul id="reg_nav" class="nav nav-tabs" style="margin-bottom: 20px;">
                    {php} if(check_reg_type('mobile')){ {/php}
                    <li {if condition="$regSwitch[0] eq 'mobile'"}class="active"{/if}><a href="#mobile_reg" data-toggle="tab">{:lang('_REGISTER_PHONE_')}</a></li>
                    {php} } {/php}
                </ul>


        {if condition="count($role_list)==1"}
        <input id="name" type="hidden" name="role" value="{$role_list[0]['id']}">
        {else /}
        <div class="form-group" style="margin: 30px 0">
            <input id="name" type="hidden" name="role" value="{$role_list[0]['id']}">
            <label for="role" class=".sr-only col-xs-12" style="display: none"></label>
            <div class="clearfix"></div>
            <ul id="role-list" class="nav nav-justified nav-pills">
                <li class="text-center">{:lang('_REGISTER_IDENTITY_SELECT_')}</li>
                {volist name="role_list" id="role"}
                <li><a onclick="$('#name').val({$role.id});$('#role-list li').removeClass('active');$(this).parent().addClass('active');"><i class="icon-user"></i> {$role.title} </a></li>
                {/volist}
            </ul>
            <script>
                $(function(){
                    $('#role-list li').eq(1).addClass('active');
                })
            </script>
            <span class="help-block"></span>
        </div>
        {/if}


        <!--手机注册-->{:modC('MOBILE_VERIFY_TYPE', 0, 'USERCONFIG')}
        <div class="tab-pane {if condition='$key eq 0'}active in{/if}" id="mobile_reg">

            <div class="form-group new-form">
                <label for="mobile" class=".sr-only col-xs-12" style="display: none"></label>
                <span class="new-icon phone-icon"></span>
                <input type="text" id="mobile" class="form-control form_check new-input" check-type="UserMobile" check-url="{:url('ucenter/member/checkAccount')}" {if condition='$key neq 0'}disabled="disabled"{/if}
                placeholder="{:lang('_PLACEHOLDER_PHONE_')}" .
                errormsg="{:lang('_ERROR_PHONE_INPUT_')}" value="" name="username">

                <input type="hidden" name="reg_type" value="mobile" {if condition='$key neq 0'}disabled="disabled"{/if}>
            </div>
            <span class="tips">{:lang('_PHONE_INPUT_')}</span>

            {php} if(modC('MOBILE_VERIFY_TYPE', 0, 'USERCONFIG') == 1){ {/php}

            <div class="form-group new-form">
                <span class="new-icon code-icon"></span>
                <input type="text" class="form-control new-input" placeholder="{:lang('_VERIFY_CODE_')}" name="reg_verify" {if condition='$key neq 0'}disabled="disabled"{/if}>
                <a class="get-code green-btn" data-role="getVerify">{:lang('_PHONE_VERIFY_')}</a>
            </div>
            <span class="tips">{:lang('_VERIFY_CODE_INPUT_')}</span>

            <div class="form-group new-form verify-check" style=" display:none;">
                <h3>确认发送验证码</h3>
                <div class="row">
                    <div class="col-xs-6">

                        <div class="lg_lf_fm_verify">
                            <img class="verifyimg reloadverify img-responsive" alt="点击切换" src="{:url('verify',array('id'=>2))}">
                        </div>
                        <div class="col-xs-12 Validform_checktip text-warning lg_lf_fm_tip"></div>
                    </div>
                    <div class="col-xs-6 input-box">
                        <label for="verifyCode2" class=".sr-only col-xs-12" style="display: none"></label>
                        <span class="new-icon code-icon"></span>
                        <input type="text" id="verifyCode2" class="form-control" placeholder="图片验证码"
                               errormsg="请填写正确的验证码" nullmsg="请填写验证码" datatype="*5-5" name="verify">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <button class="btn y-btn" data-role="checkVerify">确定</button>
                    </div>
                    <div class="col-xs-6">
                        <button class="btn c-btn" data-role="closeVerify">取消</button>
                    </div>
                </div>
            </div>
            {php} } else { {/php}
            {if condition="check_verify_open('reg')"}
            <div class="form-group new-form">
                <label for="verifyCode5" class=".sr-only col-xs-12"
                       style="display: none"></label>
                <span class="new-icon code-icon"></span>
                <input type="text" id="verifyCode5" class="form-control new-input" placeholder="验证码"
                       errormsg="请填写正确的验证码" nullmsg="请填写验证码" datatype="*5-5" name="verify">

                <div class="new-code lg_lf_fm_verify">
                    <img class="verifyimg reloadverify img-responsive" alt="点击切换"
                         src="{:url('verify')}" />
                </div>
                <div class="col-xs-12 Validform_checktip text-warning lg_lf_fm_tip"></div>
                <div class="clearfix"></div>
            </div>
            <span class="tips">输入验证码</span>
            {/if}
            {php} } {/php}

        </div>
        <!--手机注册end-->

        <div class="form-group new-form">
            <label for="nickname" class=".sr-only col-xs-12" style="display: none"></label>
            <span class="new-icon name-icon"></span>
            <input type="text" id="nickname" class="form-control form_check new-input" check-type="Nickname"  check-url="{:url('ucenter/member/checkNickname')}" placeholder="请输入昵称" value="" name="nickname">
        </div>
        <span class="tips">输入昵称，只允许中文、字母和数字和下划线</span>
        <div class="form-group new-form password_block">
            <span class="new-icon password-icon"></span>
            <input type="password" id="inputPassword" class="form-control new-input" check-length="6,30"  placeholder="请输入密码"  name="password">

            <div class="input-group-addon show-password green-btn">
                <a  href="javascript:void(0);" onclick="change_show(this)">show</a>
            </div>
        </div>
        <span class="tips">请输入密码，6-30位字符</span>

        <button type="submit" class="btn btn-primary new-btn green-btn">注册</button>


</form>
</div>
<div class="col-xs-3 right-box">
    <p class="p1">已有UCToo账号？</p>
    <a href="{:url('Ucenter/Member/login')}"><p class="p2">直接登录</p></a>
    <p class="p3">使用以下账号直接登录</p>
    <p class="i-group">
        {:hook('syncLogin')}
    </p>
</div>
        {/if}
        {if condition="$step neq 'start' and $step neq 'finish'"}
            {:widget('RegStep/view')}
        {/if}
        {if condition="$step eq 'finish'"}
            <div class="col-xs-12" style="font-size: 16px;margin-top: 30px;">
                    <span>感谢您注册 {:modC('WEB_SITE_NAME','UCT开源社交系统','Config')} ，希望你玩的愉快！
                        <a class="btn y-btn" href="{:lang('ucenter/Config/index')}" title="">完善个人资料</a> 或
                        <a class="btn y-btn" href="{:lang('home/Index/index')}" title="">前往首页</a></span>
            </div>
        {/if}

    </div>
<div class="foot">
    <h4>— 融合世界的科技 —</h4>
</div>

{block name="script"}
    <script>
        $(function(){
            $('.new-input').focus(function () {
                $(this).closest(".new-form").css('marginBottom','15px').next().css('display','block');
            });
            $('.new-input').blur(function () {
                $(this).closest(".new-form").css('marginBottom','30px').next().css('display','none');
            })
        })
    </script>
    <script type="text/javascript">
        var step="{$step}";
        if (MID == 0&&step=='start') {
            $(document)
                    .ajaxStart(function () {
                        $("button:submit").addClass("log-in").attr("disabled", true);
                    })
                    .ajaxStop(function () {
                        $("button:submit").removeClass("log-in").attr("disabled", false);
                    });
            $("form").submit(function () {
                toast.showLoading();
                var self = $(this);
//                console.log(self.serialize());
                $.post(self.attr("action"), self.serialize(), success, "json");
                return false;

                function success(data) {
                    if (data.status) {
                        //toast.success(data.info, '温馨提示');
                        setTimeout(function () {
                            window.location.href = data.url
                        }, 10);
                    } else {
                        toast.error(data.info, '温馨提示');
                        //self.find(".Validform_checktip").text(data.info);
                        //刷新验证码
                        $(".reloadverify").click();
                    }
                    toast.hideLoading();
                }
            });

            function change_show(obj) {
                if ($(obj).text().trim() == 'show') {
                    $(obj).html('hide');
                    $(obj).parents('.password_block').find('input').attr('type', 'text');
                } else {
                    $(obj).html('show');
                    $(obj).parents('.password_block').find('input').attr('type', 'password');
                }
            }


            function setNickname(obj) {
                var text = jQuery.trim($(obj).val());
                if (text != null && text != '') {
                    $('#nickname').val(text);
                }
            }

            $(function () {

                $(".reloadverify").click(function () {
                    var $this = $(this);
                    var verifyimg = $this.attr("src");
                    if (verifyimg.indexOf('?') > 0) {
                        $this.attr("src", verifyimg + '&random=' + Math.random());
                    } else {
                        $this.attr("src", verifyimg.replace(/\?.*$/, '') + '?' + Math.random());
                    }
                });
            });



            $(function () {
                $("[data-role='getVerify']").click(function () {
                    var $this = $(this);
//                    toast.showLoading();
                    var account = $this.parents('.tab-pane').find('[name="username"]').val();
                    var type = $this.parents('.tab-pane').find('[name="reg_type"]').val();
//

                    $.post(url('ucenter/member/checkAccount'),{account:account,type:type},function(res){
                        ajaxRerurn(res);
                        if(res.info == '验证成功') {
                            $('.verify-check').show();
                            $('[data-role="closeVerify"]').click(function() {
                                $('.verify-check').hide();
                                return false;
                            })
                        }
                    },'json')
                });

                $('[data-role="checkVerify"]').click(function() {
                    var $this = $(this);
//                    toast.showLoading();
                    var account = $this.parents('.tab-pane').find('[name="username"]').val();
                    var type = $this.parents('.tab-pane').find('[name="reg_type"]').val();
                    var verify = $this.parents('.tab-pane').find('[name="verify"]').val();

                    $.post("{:url('ucenter/verify/sendVerify')}", {account: account, type: type, action: 'member',verify:verify}, function (res) {
                        if (res.status) {
                            $('.verify-check').hide();
                            DecTime.obj = $this;
                            DecTime.time = "{: modC('SMS_RESEND','60','USERCONFIG')}";
                            $this.attr('disabled',true);
                            DecTime.dec_time();

                            toast.success(res.info);
                        }
                        else {
                            toast.error(res.info);
                        }
                        toast.hideLoading();
                    })
                });

                $('#reg_nav li a').click(function(){
                    $('.tab-pane').find('input').attr('disabled',true);
                    $('.tab-pane').eq($("#reg_nav li a").index(this)).find('input').attr('disabled',false);
                })
                $("[type='submit']").click(function () {
                    $(this).parents('form').submit();
                })

                $('[href="#{$type}_reg"]').click()


            })
        }



        var DecTime = {
            obj:0,
            time:0,
            dec_time : function(){
                if(this.time > 0){
                    this.obj.text(this.time--+'S')
                    setTimeout("DecTime.dec_time()",1000)
                }else{
                    this.obj.text("{:lang('_EMAIL_VERIFY_')}")
                    this.obj.attr('disabled',false)
                }

            }
        }

    </script>
    {load href="/core/static/css/form_check.css" /}
    {load href="/core/static/js/form_check.js" /}
    <script>
        // 验证密码长度
        $(function(){
            $('#inputPassword').after('<div class=" show_info" ></div>');
            $('#inputPassword').blur(function(){

                var obj =$('#inputPassword');
                var str =  obj.val().replace(/\s+/g, "");
                var html = '';
                if (str.length == 0) {
                    html = '<div class="send red"><div class="arrow"></div>'+"{:lang('_EMPTY_CANNOT_')}"+'</div>';
                } else {
                    if (typeof (obj.attr('check-length')) != 'undefined') {
                        var strs = new Array(); //定义一数组
                        strs = obj.attr('check-length').split(","); //字符分割
                        if (strs[1]) {
                            if (strs[1] < str.length || str.length < strs[0]) {
                                html = '<div class="send red"><div class="arrow"></div>'+"{:lang('_LENGTH_ILLEGAL_')}"+'</div>';
                            }
                        }
                        else {
                            if (strs[0] < str.length) {
                                html = '<div class="send red"><div class="arrow"></div>'+"{:lang('_LENGTH_ILLEGAL_')}"+'</div>';
                            }
                        }
                    }
                    obj.parent().find('.show_info').html(html);
                }
            })
        })
    </script>
{/block}
</body>
</html>